<template>
  <van-icon size="0.8rem" name="exchange" @click="$router.push('/')"/>
  <van-form class="loginform" @submit="onSubmit">
    <div style="text-align: center;font-size: 0.6rem">登 陆</div>
    <van-cell-group inset>
      <van-field
          autocomplete="false"
          v-model="phone"
          label="手机号"
          placeholder="用户名"
          :rules="[{ required: true, message: '请输入手机号' }]"
      />
      <van-field
          v-model="password"
          type="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请输入密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit" @click="loginByPhone">
        登陆
      </van-button>
    </div>
  </van-form>

</template>

<script>
import {getLoginUserInfo} from "../api/user";

export default {
  name: "Login",
  data() {
    return {
      phone: '',
      password: ''
    }
  },
  methods: {
    async loginByPhone() {
      let result = await this.$store.dispatch('user/loginByPhoneNumber', {phone: this.phone, password: this.password})
      if (result.data.code == 200) {
        this.$store.commit('user/updateIsLogin')
        this.$store.commit('user/updateToken', result.data.token)
        let result2 = await getLoginUserInfo(result.data.account.id)
        this.$store.commit('user/updateUserInfo', result2.data)
        this.$router.push('/userinfo')
      } else {
        alert('账号或密码错误！')
        this.password = ''
      }
    }
  }
}
</script>

<style scoped>
.loginform {
  margin-top: 50%;
}
</style>